<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/mvc.js"></script>
<script type="text/javascript" src="js/mvc-init.js"></script>
<script type="text/javascript" src="js/mvc-layer.js"></script>
<script type="text/javascript" src="js/mvc-drag.js"></script>
<script type="text/javascript" src="js/mvc-view-rect.js"></script>
</head>
<style type="text/css">
ul,ol,menu,li{
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#view{
	width: 360px;
	height: 480px;
	border: 1px solid #000;
	left: 73px;
	top: 37px;
	position: absolute;
}
#toolbar{
	width: 220px;
	position: absolute;
	right: 0px;
	top: 0px;
	bottom: 0px;
	border: 0px solid #ccc;
	background-color: #ccc;
}

.rect-handler{
	font-size: 14px;
	padding: 5px;
}
.rect-handler li{
	clear: both;
	margin: 0px 0px 3px 0px;
}
.rect-handler li label{
	display: block;
	width: 100%;
	height: 1.5em;
	line-height: 1.5em;
	overflow: hidden;
}
.rect-handler li span, .rect-handler li input{
	display: block;
	float: left;
}
.rect-handler li span{
	width: 50px;
	text-align: right;
	padding-right: 5px;
}
</style>
<body>

<div id="view"></div>
<div id="toolbar"></div>

<script type="text/javascript">

mvc.init();

var viewRectTool = mvc.CreateViewRect({
	className: 'rect-handler'
});
viewRectTool.appendTo('#toolbar');

var modelSnap = mvc.CreateModelSnap();

var layer1 = mvc.CreateDragableLayer();
var layer2 = mvc.CreateDragableLayer();
layer1.appendTo('#view');
layer2.appendTo('#view');

layer1.xy(52, 57).size(300, 120)
	.css({'background': 'rgba(0,0,0,0.5)'})
	//.image('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=306691084,3931829672&fm=23&gp=0.jpg')
	;
layer2.xy(152, 197).size(130, 170)
	.css({'background': 'rgba(0,0,0,0.5)'})
	//.image('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=306691084,3931829672&fm=23&gp=0.jpg')
	;


var layer = false, type = null;

var drag = mvc.dragger('#view');
drag.$state = function(e){
	var id = mvc.getAttribute(e.target, 'id');
	layer = mvc.findLayer(id);
	if(!layer){
		viewRectTool.detach();
		return -1;
	}

	modelSnap.attach(layer.valueOf());
	viewRectTool.attach(layer);
	type = mvc.getAttribute(e.target, 'type');
	return 0;
};
drag.onmove = function(offset){
	if(type == 'resize'){
		var size = modelSnap.size(offset);
		layer.size(size);
		viewRectTool.size(size);
	} else {
		var pos = modelSnap.position(offset);
		layer.xy(pos);
		viewRectTool.position(pos);
	}
};
drag.onend = function(offset){
	if(type == 'resize'){
		layer.size(modelSnap.size(offset));
	} else {
		layer.xy(modelSnap.position(offset));
	}
	layer.css({});
};



</script>


</body>
</html>